<template>
  <view class="goods_detail">
    <u-swiper :list="goodsDetail.pics" name="pics_big" height="500" img-mode="aspectFit"
    @click="handlePreviewImage"></u-swiper>
    <view class="good-detail-price">￥{{goodsDetail.goods_price}}</view>
    <view class="good-detail-title">{{goodsDetail.goods_name}}</view>
    <!-- 富文本，图文详情 -->
      <!--  uniapp + uview  3种方式实现富文本渲染
      1 原生小程序    rich-text     简单内容 使用它
      2 vue本身 技术  v-html 
      3 uview 提供有  u-parse      复杂内容 使用它  -->
    <!-- <rich-text :nodes="goodsDetail.goods_introduce"></rich-text> -->
    <!-- <view v-html="goodsDetail.goods_introduce"></view> -->
    <u-parse :html='goodsDetail.goods_introduce'></u-parse>
    	<view class="navigation">
		<view class="left">
			<view class="item">
				<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">客服</view>
			</view>
			<view class="item">
				<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">店铺</view>
			</view>
			<navigator url="/pages/cart/cart" open-type="switchTab" class="item car">
				<u-badge class="car-num" :count="totalNums" type="error" :offset="[-3, -6]"></u-badge>
				<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">购物车</view>
			</navigator>
		</view>
		<view class="right">
			<view class="cart btn u-line-1" @click="handleCart">加入购物车</view>
			<view class="buy btn u-line-1">立即购买</view>
		</view>
	</view>
  </view>
</template>

<script>
// 辅助函数
import { mapMutations,mapGetters } from 'vuex'

export default {
  data(){
    return{
      goodsDetail:null
    }
  },
  computed:{
	...mapGetters('cart',['totalNums'])
  },
    onLoad(options){
      // console.log(options);
      // 根据id获取详情
      this.getGoodDetail(options.goods_id)

	//   测试store有没有数据
	console.log(this.$store);
    },
    methods:{
		// 调用vuex中的mutations
		// ...mapMutations("cart",["模块中的函数1"，"模块中的函数2"，...]),
		...mapMutations("cart",["addCart"]),
    async  getGoodDetail(goods_id){
      const result=await this.$u.get('/goods/detail',{goods_id})
      // console.log(result);
      this.goodsDetail=result.message
    },
    // 点击轮播图全屏预览图片，index是被点击图片的下标
      handlePreviewImage(index){
        // 获取要轮播图片的url 组成新的数组
        const urls=this.goodsDetail.pics.map((v)=>v.pics_big)
        // 获取被点击的图片的url
        const current=urls[index]
        // 全屏预览图片
        uni.previewImage({urls,current})
      },
	  // 点击加入购物车
	  handleCart(){
		// 调用加入购物车mutation，把当前的商品传递过去
		// 不使用辅助函数
		// this.$store.commit("cart/addCart",this.goodsDetail)
		this.addCart(this.goodsDetail)
		
	  }
    }
}
</script>

<style lang="scss" scoped>
.goods_detail{
  padding-bottom: 104rpx;
}
.navigation {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
	display: flex;
	margin-top: 100rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0;
	.left {
		display: flex;
		font-size: 20rpx;
		.item {
			margin: 0 30rpx;
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}
		.cart {
			background-color: #ed3f14;
			margin-right: 30rpx;
		}
		.buy {
			background-color: #ff7900;
		}
	}
}
</style>
